<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Flying Saucer: CSS Font Sizing Support</title>
    <link rel="stylesheet" type="text/css" href="general.css" title="Style" media="screen" />
    <link rel="stylesheet" type="text/css" href="print.css" title="Style" media="print" />
    <style>
      body {
        font-family: tahoma, verdana, arial;
      }
	  table {
		  border-collapse: collapse;
	  }
	  td, th {
          padding: 5px;
      }
      .label {
          text-align: left;
          background-color: silver; 
          font-weight: bold;
      }
    </style>
  </head>

  <body>
    <p class="link left-link"><a href="demoNav:back">Previous Page</a></p>
    <p class="link right-link"><a href="demoNav:forward">Next Page</a></p>
    <p id="fslogo">Flying Saucer XML/CSS2 Renderer</p>
    <span id="pagebyline">
      <span style="font-size: xx-large">CSS</span> 
      <span style="font-size: large">Font</span> 
      <span style="font-size: medium">Sizing</span> 
      <span style="font-size: xx-small">Support</span>
    </span>
      <br />
      <p><b>Font sizing support includes</b>: Apart from the standard XHTML h1-h6 elements, you can also size
      fonts using the <b>xx-small</b> through <b>xx-large</b> styling attributes, as well as proportionately-sized elements
      using em, %, and ex.</p>
      <br />
      <h3>Table of Absolute versus HX Sizes</h3>
      <table border="1" style="width: 100%">
      <tr>
        <th class="label" style="width: 10%; ">CSS abs-size</th>
        <td style="width: 8%; font-size: xx-small;">xx-small</td>
        <td style="width: 5%; font-size: x-small;">x-small</td>
        <td style="width: 5%; font-size: small;">small</td>
        <td style="width: 8%; font-size: medium;">medium</td>
        <td style="width: 8%; font-size: large;">large</td>
        <td style="width: 12%; font-size: x-large;">x-large</td>
        <td style="width: 15%; font-size: xx-large;">xx-large</td>
      </tr>
      <tr>
        <th class="label" style="width: 10%; ">HTML Headings</th>
        <td style="width: 8%;"><h6>h6</h6></td>
        <td style="width: 5%;">{n/a}</td>
        <td style="width: 5%;"><h5>h5</h5></td>
        <td style="width: 8%;"><h4>h4</h4></td>
        <td style="width: 8%;"><h3>h3</h3></td>
        <td style="width: 12%;"><h2>h2</h2></td>
        <td style="width: 15%;"><h1>h1</h1></td>
      </tr>
      <tr>
        <th class="label" style="width: 10%; ">HTML Font</th>
        <td style="width: 8%;">1</td>
        <td style="width: 5%;">{n/a}</td>
        <td style="width: 5%;">2</td>
        <td style="width: 8%;">3</td>
        <td style="width: 8%;">4</td>
        <td style="width: 12%;">5</td>
        <td style="width: 15%;">6</td>
      </tr>
      </table>

      <h3>Proportional Sizing using EM Square, EX, and %</h3>
      <table border="1" style="width: 100%">
      <tr>
      <td width="33%">
		  <table  border="0" width="100%">
			  <tr>
				  <td style="width: 33%; vertical-align: top">
					  <p><span style="font-size: 0.6em">0.6em</span></p>
					  <p><span style="font-size: 0.7em">0.7em</span></p>
					  <p><span style="font-size: 0.8em">0.8em</span></p>
					  <p><span style="font-size: 0.9em">0.9em</span></p>
					  <p><span style="font-size: 1.0em">1.0em</span></p>
					  <p><span style="font-size: 1.1em">1.1em</span></p>
				  </td>
				  <td style="width: 33%; vertical-align: top">
					  <p><span style="font-size: 1.2em">1.2em</span></p>
					  <p><span style="font-size: 1.3em">1.3em</span></p>
					  <p><span style="font-size: 1.4em">1.4em</span></p>
					  <p><span style="font-size: 1.5em">1.5em</span></p>
					  <p><span style="font-size: 1.6em">1.6em</span></p>
					  <p><span style="font-size: 1.7em">1.7em</span></p>
				  </td>
				  <td style="width: 33%; vertical-align: top">
					  <p><span style="font-size: 1.8em">1.8em</span></p>
					  <p><span style="font-size: 1.9em">1.9em</span></p>
					  <p><span style="font-size: 2.0em">2.0em</span></p>
					  <p><span style="font-size: 3.0em">3.0em</span></p>
				  </td>
			  </tr>
		  </table>
	<table  border="0" width="100%">
		<tr>
			<td style="width: 33%; vertical-align: top">
				<p><span style="font-size: 3ex">0.6ex</span></p>
				<p><span style="font-size: 4ex">0.6ex</span></p>
				<p><span style="font-size: 5ex">0.7ex</span></p>
				<p><span style="font-size: 6ex">0.8ex</span></p>
				<p><span style="font-size: 7ex">0.9ex</span></p>
				<p><span style="font-size: 8ex">1.0ex</span></p>
				<p><span style="font-size: 9ex">1.1ex</span></p>
			</td>
			<td style="width: 33%; vertical-align: top">
				<p><span style="font-size: 10ex">1.2ex</span></p>
				<p><span style="font-size: 11ex">1.3ex</span></p>
				<p><span style="font-size: 12ex">1.4ex</span></p>
			</td>
			<td style="width: 33%; vertical-align: top">
				<p><span style="font-size: 13ex">1.5ex</span></p>
				<p><span style="font-size: 14ex">1.6ex</span></p>
			</td>
		</tr>
	</table>
	<table border="0" width="100%">
		<tr>
			<td style="width: 33%; vertical-align: top">
				<p><span style="font-size: 60%">60%</span></p>
				<p><span style="font-size: 70%">70%</span></p>
				<p><span style="font-size: 80%">80%</span></p>
				<p><span style="font-size: 90%">90%</span></p>
				<p><span style="font-size: 100%">100%</span></p>
				<p><span style="font-size: 110%">110%</span></p>
			</td>
			<td style="width: 33%; vertical-align: top">
				<p><span style="font-size: 120%">120%</span></p>
				<p><span style="font-size: 130%">130%</span></p>
				<p><span style="font-size: 140%">140%</span></p>
				<p><span style="font-size: 150%">150%</span></p>
				<p><span style="font-size: 160%">160%</span></p>
				<p><span style="font-size: 170%">170%</span></p>
			</td>
			<td style="width: 33%; vertical-align: top">
				<p><span style="font-size: 180%">180%</span></p>
				<p><span style="font-size: 190%">190%</span></p>
				<p><span style="font-size: 200%">200%</span></p>
				<p><span style="font-size: 300%">300%</span></p>
			</td>
		</tr>
	</table>
      </td>
      </tr>
      </table>
  </body>
</html>